<template>
      <div class="sider-two">
            <ul class="sider-two-ul">
            <router-link 
            tag="li"
             v-for="item of list" 
                 :key="item.id"
                :to="/chart/+ item.path"
                 >{{item.title}}</router-link>
                 
           <!-- <ul class="sider-ul">
               <li 
                 v-for="item of list" 
                 :key="item.id" 
                 
                 >
                 {{item.title}}
                 <router-view />
               </li>
           </ul> -->
          </ul> 
          <router-view />
        </div>
</template>

<script>
export default {
    name:'chart',
    data(){
        return {
            list:[{
                id:1,
                title:'图标1',
                path:'tu1'
            },{
                id:3,
                title:'图标2',
                path:'tu2'
            }]
        }
    }
}
</script>

<style lang="scss" scoped>
	.sider-two{
        display: flex;
        width: 100%;
        &-ul{
            width:208px;
            border: 1px solid black;
            margin-right: 16px;
            background-color: #363439;
        }
    }
</style>
